<template>
  <div>
    <el-form label-width="auto" label-position="right">
      <el-form-item label="标识符">
        <!-- identifiers -->
        <el-button-group>
          <el-button @click="onIdButtonClick(sampleIdLabel)">{{
            sampleIdLabel
          }}</el-button>
          <el-button @click="onIdButtonClick(fieldNameLabel)">{{
            fieldNameLabel
          }}</el-button>
          <el-button @click="onIdButtonClick(valueLabel)">{{
            valueLabel
          }}</el-button>
          <el-button @click="onIdButtonClick(valueToRemoveLabel)">{{
            valueToRemoveLabel
          }}</el-button>
          <el-button @click="onIdButtonClick(extraLabel)">{{
            extraLabel
          }}</el-button>
        </el-button-group>
      </el-form-item>
      <!-- id field name -->
      <el-form-item label="ID字段名">
        <el-input v-model="sqlBuilderSettings.idFieldName" />
      </el-form-item>
      <!-- text id field -->
      <el-form-item label="字符串ID">
        <el-switch
          v-model="sqlBuilderSettings.isTextId"
          inline-prompt
          active-text="是"
          inactive-text="否"
        />
      </el-form-item>
      <!-- script column header -->
      <el-form-item label="脚本列名">
        <el-input v-model="sqlBuilderSettings.scriptColumnHeader" />
      </el-form-item>
      <!-- extra logic -->
      <el-form-item label="额外列逻辑">
        <el-radio-group v-model="sqlBuilderSettings.extraLogic">
          <el-radio-button label="AND" value="AND" />
          <el-radio-button label="OR" value="OR" />
        </el-radio-group>
      </el-form-item>
      <!-- categorical update kind -->
      <el-form-item label="分类更新类型">
        <el-radio-group v-model="sqlBuilderSettings.categoricalUpdateKind">
          <el-radio-button label="APPEND" value="APPEND" />
          <el-radio-button label="RESET" value="RESET" />
        </el-radio-group>
      </el-form-item>
      <!-- build data table -->
      <el-form-item label="创建数据表">
        <el-switch v-model="sqlBuilderSettings.buildDataTable" />
      </el-form-item>
      <!-- data table decimal place -->
      <el-form-item label="小数位数">
        <el-slider
          :min="0"
          :max="10"
          :disabled="!sqlBuilderSettings.buildDataTable"
          v-model="sqlBuilderSettings.dataTable.decimalPlaces"
          style="max-width: 200px; margin-left: 4px"
        />
      </el-form-item>
      <!-- add percentage -->
      <el-form-item label="添加百分比">
        <el-switch
          v-model="sqlBuilderSettings.dataTable.addPercentage"
          :disabled="!sqlBuilderSettings.buildDataTable"
        />
      </el-form-item>
      <!-- data table page name -->
      <el-form-item label="数据表页名">
        <el-input
          v-model="sqlBuilderSettings.dataTable.resultPageName"
          :disabled="!sqlBuilderSettings.buildDataTable"
        />
      </el-form-item>
    </el-form>
    <!-- dialogs -->
    <el-dialog v-model="idDialogVisible" :title="`${idDialogLabel}标识符`">
      <el-input
        v-model="idDialogContent"
        type="textarea"
        style="max-width: 300px"
        :autosize="{ minRows: 5, maxRows: 15 }"
      />
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { sqlBuilderSettings } from "../../store";
// Props
defineProps({
  columnHeaders: String,
});
// 常量定义
const sampleIdLabel = "样本ID";
const fieldNameLabel = "字段名";
const valueLabel = "字段值";
const valueToRemoveLabel = "删除值";
const extraLabel = "其他值";
// 控制变量
const idDialogVisible = ref(false);
const idDialogLabel = ref("");
const idDialogContent = ref("");
// 回调
function onIdButtonClick(label: string) {
  idDialogLabel.value = label;
  // 获取字符串
  let content = "";
  switch (label) {
    case sampleIdLabel: {
      content = sqlBuilderSettings.value.identifiers.id;
      break;
    }
    case fieldNameLabel: {
      content = sqlBuilderSettings.value.identifiers.field;
      break;
    }
    case valueLabel: {
      content = sqlBuilderSettings.value.identifiers.value;
      break;
    }
    case valueToRemoveLabel: {
      content = sqlBuilderSettings.value.identifiers.valueToRemove;
      break;
    }
    case extraLabel: {
      content = sqlBuilderSettings.value.identifiers.extra;
      break;
    }
  }

  idDialogContent.value = content;
  idDialogVisible.value = true;
}
// 当对话框关闭时，更新保存的值
watch(idDialogVisible, (value) => {
  if (value || idDialogLabel.value === "") {
    return;
  }
  // 更新字符串
  switch (idDialogLabel.value) {
    case sampleIdLabel: {
      sqlBuilderSettings.value.identifiers.id = idDialogContent.value;
      break;
    }
    case fieldNameLabel: {
      sqlBuilderSettings.value.identifiers.field = idDialogContent.value;
      break;
    }
    case valueLabel: {
      sqlBuilderSettings.value.identifiers.value = idDialogContent.value;
      break;
    }
    case valueToRemoveLabel: {
      sqlBuilderSettings.value.identifiers.valueToRemove =
        idDialogContent.value;
      break;
    }
    case extraLabel: {
      sqlBuilderSettings.value.identifiers.extra = idDialogContent.value;
      break;
    }
  }
});
</script>
